<template>
	<view class="page_box">
		<view class="content">
			<image class="bg_img" src="http://shopro.7wpp.com/imgs/poster/invite_poster.png" mode=""></image>
			<view class="poster-box y-f">
				<!-- <view style="margin: 40upx;">
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300"
						:width="300" />
				</view> -->

				<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				<view class="share-box" v-if="poster.finalPath">
					<view class="share-list-box x-f">
						<!-- #ifdef MP-WEIXIN -->
						<!-- <button class="share-btn share-item y-f" open-type="share">
							<image
								class="share-img"
								src="http://shopro.7wpp.com/imgs/share_wx.png"
								mode=""
							></image>
							<text class="share-title">微信好友</text>
						</button> -->
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<!-- <view class="share-item y-f" @tap="share">
							<image
								class="share-img"
								src="http://shopro.7wpp.com/imgs/share_wx.png"
								mode=""
							></image>
							<text class="share-title">微信好友</text>
						</view> -->
						<!-- #endif -->
						<view class="share-item y-f" @tap="saveImage">
							<image class="share-img" src="http://shopro.7wpp.com/imgs/share_poster.png" mode=""></image>
							<text class="share-title">保存图片</text>
						</view>
						<view class="share-item y-f" @tap="copyLink">
							<image class="share-img" src="http://shopro.7wpp.com/imgs/share_link.png" mode=""></image>
							<text class="share-title">复制链接</text>
						</view>
					</view>
				</view>
			</view>
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="invite_poster"
					:style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
			</view>
			<!-- 指引 -->
			<yy-guide v-model="showShareGuide"></yy-guide>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import _app from '@/common/utils/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
	import h5Copy from '../../js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js';
	import H5Api from '../../js_sdk/ican-H5Api/ican-H5Api.js';
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"


	export default {
		components: {
			ayQrcode,

		},
		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'invite_poster',
				showShareGuide: false,
				image: '',
				data: {},
				//二维码相关参数
				modal_qr: false,
				url: '', // 要生成的二维码值
			};
		},
		created() {
			this.init();
		},
		onShow() {},
		onLoad(e) {
			this.info = e.info
			// let that = this;
			// that.showQrcode(); //一加载生成二维码

		},
		methods: {
			// 展示二维码
			showQrcode() {
				// http://222.210.12.21:3333/
				// this.url = 'http://139.155.174.84:8085' + '/#/pages/login/registered?' +'superId=' +uni.getStorageSync('data').id +'&level=' + this.info
				this.url = 'http://139.155.174.84:8085' + '/#/pages/login/registered?' +'superId=' +uni.getStorageSync('data').id +'&level=' + this.info
				//http://47.108.165.65:8100/#/pages/login/registered?superId=35&level=B
				
				
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},



			init() {
				return Promise.all([this.gettingInfo(), this.qrCd(),this.showQrcode()]).then(() => {
					this.shareFc();
				});
			},

			// 获取用户
			async gettingInfo() {
				const res = await this.$u.get('user/' + uni.getStorageSync('data').id, {}, {});
				if (res.code == 1) {
					return false;
				}
				this.data = res.data;
			},
			// 二维码
			async qrCd() {
				let obj = {
					url: this.$API_URL,
					level: this.info,
					superId: uni.getStorageSync('data').id,
				};
				const res = await this.$u.get('qrCode/createCommonQRCode', obj, {});
				this.image = res;
			},
			async shareFc() {
				let that = this;
				try {
					console.log('准备生成:' + new Date());
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						// type: 'invitePoster', https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/bj.png

						// backgroundImage: 'http://cs.qianjitianxia.com/uploads/20210413/f78c180de756e7ee8d08a830cadc103c.jpg', //接口返回的背景图
						backgroundImage: 'https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/bj.png', //接口返回的背景图
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数

						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.042;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'image', //头像
										// url: 'https://files.catbox.moe/99acue.jpg',
										// url: this.data.headimgurl,
										alpha: 1,
										dx: bgObj.width * 0.5 - (bgObj.width * 0.16) / 2,
										dy: bgObj.width * 0.16,
										infoCallBack(imageInfo) {
											let scale = (bgObj.width * 0.16) / imageInfo
												.height;
											return {
												circleSet: {
													x: (imageInfo.width * scale) / 2,
													y: (bgObj.width * 0.16) / 2,
													r: (bgObj.width * 0.16) / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width *
													scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.16
												/* roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													} */
											};
										}
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: this.data.nickname,
										size: fontSize,
										color: 'black',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.5 - textLength * 0.5,
												dy: bgObj.width * 0.42
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									// {
									// 	type: 'image', //微信小程序码
									// 	// url: `${that.$API_URL}wechat/wxacode?scene=${that.scene}`,
									// 	url:
									// 		'http://cs.qianjitianxia.com/uploads/20210413/f78c180de756e7ee8d08a830cadc103c.jpg',
									// 	alpha: 1,
									// 	drawDelayTime: 500, //draw延时时间
									// 	dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
									// 	dy: bgObj.width * 0.855,
									// 	infoCallBack(imageInfo) {
									// 		return {
									// 			dWidth: bgObj.width * 0.26,
									// 			dHeight: bgObj.width * 0.26
									// 			// roundRectSet: { // 圆角矩形
									// 			// 	r: imageInfo.width * 0.025
									// 			// }
									// 		};
									// 	}
									// },

									{
										type: 'qrcode',
										text: this.url,
										size: bgObj.width * 0.5,
										dx: bgObj.width * 0.4 - (bgObj.width * 0.26) / 2,
										dy: bgObj.width * 0.855
									}
								]);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					// console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
					// this.poster.finalPath = d.poster.tempFilePath;
					this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
				}
			},

			saveImage() {
				let that = this;

				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success: function() {
						console.log('save success');
					}
				});
			},

			copyLink() {
				let that = this;
				let content =
					'http://139.155.174.84:8085' + '/#/pages/login/registered?superId=' + uni.getStorageSync('data').id + "&level=" + this.info; // 复制内容，必须字符串，数字需要转换为字符串
					// 'http://222.210.12.21:3333' + '/#/pages/login/registered?superId=' + uni.getStorageSync('data').id + "&level=" + this.info; // 复制内容，必须字符串，数字需要转换为字符串
				const result = h5Copy(content);  
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					this.$refs.uToast.show({
						title: '复制成功',
						type: 'success'
					});
				}
			},
			share() {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareInfo.path,
					title: that.shareInfo.title,
					summary: that.shareInfo.title,
					imageUrl: that.shareInfo.imageUrl,
					success: res => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif

				// #ifdef H5
				that.showShareGuide = true;
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.content {
		position: relative;
		width: 100%;
		height: 1350rpx;

		.bg_img {
			width: 100%;
			height: 120vh;
		}

		.poster-box {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50rpx;

			.posterImage {
				width: 660rpx;
			}
		}
	}

	.share-box {
		width: 750rpx;
		border-radius: 30rpx;
		margin-top: 20rpx;

		.share-list-box {
			.share-btn {
				background: none;
				border: none;
				line-height: 1;
				padding: 0;

				&::after {
					border: none;
				}
			}

			.share-item {
				flex: 1;
				padding-bottom: 20rpx;

				.share-img {
					width: 70rpx;
					height: 70rpx;
					background: rgba(246, 246, 254, 1);
					border-radius: 50%;
					margin-bottom: 20rpx;
				}

				.share-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>
